<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="领券中心" navbarType='3'></wlk-navbar>
        <u-sticky bgColor="#fff">
            <view class="content-tabs">
                <u-tabs
                        :activeStyle="{
                        fontSize: '28rpx',
                        padding:'0 9rpx',
                        color:themeColor,
                        fontWeight: 'bold',
                        transform: 'scale(1.05)'
                    }"
                        :itemStyle="{
                         height: '40px',
                         alignItems:'flex-start',
                         padding:'0 30rpx',
                    }"
                        :inactiveStyle="{
                        fontSize: '28rpx',
                        padding:'0 9rpx',
                        transform: 'scale(1)'
                    }"
                        :list="category"
                        lineWidth="35"
                        lineHeight="2"
                        :lineColor="themeColor"
                        :current="current"
                        @change="changeTab"
                ></u-tabs>
            </view>
        </u-sticky>
        <view class="coupon-content">
            <block v-if="loadStatus=='nomore' && list.length==0">
                <view class="not-data">
                    <u-empty
                            :icon="uEmpty.search"
                            text="暂无优惠券"
                    >
                    </u-empty>
                </view>
            </block>
            <block v-else>
                <view class="coupon-list wlkflex justify-between wrap">
                    <view class="item relative mb20 wd100 overHidden" v-for="(item,index) in list" @click="$Router.push('/pages/coupon/detail?id='+item.id)">
                        <view class="top"></view>
                        <view class="bottom"></view>
                        <view class="wlkflex justify-between">
                            <view class="left wlkflex pd20 wrap relative">
                                <view class="money center wd100" v-if="item.sale_type=='deduct'">
                                    <view class="bold">￥{{item.deduct}}</view>
                                    <view class="enough mt05" v-if="item.enough>0">满{{item.enough}}元可用</view>
                                    <view class="enough mt05" v-else>无门槛</view>
                                </view>
                                <view v-else class="money center wd100">
                                    <view class="bold">{{item.discount}}折</view>
                                    <view class="enough mt05" v-if="item.enough>0">满{{item.enough}}元可用</view>
                                    <view class="enough mt05" v-else>无门槛</view>
                                </view>
                                <view class="tag">
                                    {{item.apply_type==0?'全场通用':'部分品类适用'}}
                                </view>
                            </view>
                            <view class="right wlkflex justify-between">
                                <view class="info wlkflex wrap">
                                    <view class="wd100 name bold">{{item.name}}</view>
                                    <view class="wd100 col9 ratio">
                                        <view class="mb10">剩余可抢 {{item.ratio}}%</view>
                                        <view class="progress">
                                            <u-line-progress :showText="false" height="5" :percentage="item.ratio" activeColor="#F24544"></u-line-progress>
                                        </view>
                                    </view>

                                </view>
                                <view class="btn" @click.stop="send(item.id)">立即领取</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="load-more">
                    <u-loadmore :status="loadStatus" :loading-text="loadingText"  :loadmore-text="loadmoreText" :nomore-text="nomoreText" dashed  line />
                </view>
            </block>
        </view>
    </view>
</template>

<script>
    var _self;
    import { toUrl } from '@/wlkutils/tools';
    import share from "@/wlkutils/share";
    import { mapGetters} from 'vuex';
	export default {
        computed:{
            ...mapGetters(['themeColor','uEmpty','category','images']),
        },
		data() {
			return {
                list:[],
                page: 1,
                loadStatus:'loading',
                loadingText: '努力加载中',
                loadmoreText: '轻轻上拉',
                nomoreText: '实在没有了',
                current:0
			};
		},
		onLoad(option) {
		    _self = this;
        },
		onShow() {
            this.loadStatus = 'loading';
            this.page = 1;
            this.list = [];
            if(!uni.$u.test.isEmpty(this.category)){
                this.getData();
            }
		},
        watch:{
            category(val) {
                this.getData();
            }
        },
        onShareAppMessage(res){
            return share.setShareInfo();
        },
        onReachBottom() {
            if(this.loadStatus == "nomore"){
                return;
            }
            this.page++;
            this.getData();
        },
		methods: {
            changeTab(item){
                this.current = item.index;
                this.init();
            },
            init(){
                this.loadStatus = 'loading';
                this.page = 1;
                this.list = [];
                this.getData();
            },
            change(v){
                if(uni.$u.test.isEmpty(v)){
                    this.init();
                }
            },
            async getData() {
                const res = await uni.$u.http.post("coupon/getList", {
                    page: this.page,
                    category_id:this.category[this.current]?this.category[this.current].id:0
                });
                if (res && res.data && res.data.rows) {
                    this.list = this.list.concat(res.data.rows);
                }
                this.loadStatus = res.data.rows.length < res.data.limit ? 'nomore' : 'loadmore';
            },
            send(id){
                uni.$u.http.post('coupon/send', {
                    id:id
                }).then(res => {
                    uni.$u.toast(res.msg)
                    // _self.init();
                }).catch(res => {

                })
            }
		},
	};
</script>

<style lang="scss">
    page{
        /*background-color: #FFFFFF;*/
        .content-tabs{
            background-color: #FFFFFF;
            padding-top: 20rpx;
            width: 100%;
            border-bottom: 1px solid #F3F3F3;
            height: 49px;
        }
        .coupon-content {
            .head-box{
                background-color: #FFFFFF;
            }
            .coupon-list{
                padding: 30rpx 30rpx;
                .item{
                    border-radius: 6px;
                    height: 200rpx;
                    background-color: #FFFFFF;
                    .top{
                        width: 25rpx;
                        height: 25rpx;
                        border-radius: 50%;
                        background-color: #f9f9f9;
                        position: absolute;
                        top: -12.5rpx;
                        left: 188.5rpx;
                        z-index: 99;
                    }
                    .bottom{
                        width: 25rpx;
                        height: 25rpx;
                        border-radius: 50%;
                        background-color: #f9f9f9;
                        position: absolute;
                        bottom: -12.5rpx;
                        left: 188.5rpx;
                        z-index: 99;
                    }
                        .left{
                            width: 29%;
                            background-image: linear-gradient(to right, #fd3f01, #fd5800, #fd6c00, #fd7e0a, #fd8e18);
                            height: 200rpx;
                            .money{
                                font-size: 45rpx;
                                color: #FFFFFF;
                            }
                            .enough{
                                font-size: $font-sm;
                                color: rgba(255,255,255,.8);
                            }
                            .tag{
                                position: absolute;
                                top:0;
                                left: 0;
                                padding: 5rpx 10rpx;
                                font-size: $font-sm;
                                background-image: linear-gradient(to right, #fd6800,rgba(253, 142, 24,.2));
                                color: #FFFFFF;
                                border-radius: 0 0 6px 0;
                            }
                        }
                        .right{
                            height: 200rpx;
                            width: 70%;
                            padding: 20rpx 20rpx;
                            .info{
                                height: 100%;
                                width: 88%;
                                padding: 5rpx 10rpx;
                                border-right: 1px dashed #f3f3f3;
                                .name{
                                    font-size: $font-lg;
                                }
                                .ratio{
                                    font-size: $font-base;
                                    .progress{
                                        width: 70%;
                                    }
                                }
                            }
                            .btn{
                                width: 12%;
                                font-size: $font-base;
                                letter-spacing: 3px;
                                writing-mode:tb-rl;
                                color: #F24544;
                            }
                        }
                }
            }
        }
    }

</style>
